<template>
  <div class="pageBankCard">
    <PageHeader :lang="lang"></PageHeader>
    <!--资产总览-->
    <div class="pageBody" id="pageBody">
      <!-- 左侧部分 -->
      <pageLeftMenu ref="getUnReadNotInfo"></pageLeftMenu>
      <!-- 右侧部分 -->
      <div class="pageMain">
        <div class="mainHead border">
          <!--  +++新增一个key ,value=银行账户 -->
          <h3 class="mainTitle">{{lang['assets bank card account']}}</h3>
          <ul>
            <!--银行账户管理列表-->
            <li v-for="item in CurrencyList" :class="{lihover: item.Code === CurrencyName}" @click="cKcurrency(item)" :id="item.Code">
              <a href="javascript:;">
                <img :src="'../../../static/images/bankcard/' + item.Code + '.png'" height="15" width="22" alt="">
                <span>{{item.Code}}</span>
              </a>
            </li>
          </ul>
        </div>
        <div class="bankcard_card">
          <ul>
            <li v-for="(item, index) in filterAddress" class="bank-list" :class="{'active': index === currentIndexs}" @click="currentIndex(item, index)" @mouseover="liEnter(index)" @mouseout="liEnterHide(index)">
              <div class="listContent">
                <p><span>{{CurrencyName}}</span> <a v-show="deleteShow === index" class="delete" href="javascript:;" @click.stop="deleteBanCard(item.ID)"></a></p>
                <div class="text">
                  <p :title="item.BankName">{{item.BankName}}</p>
                  <p :title="item.CardUserName">{{item.CardUserName}}</p>
                  <p :title="item.CardNumber">{{item.CardNumber}}</p>
                </div>
                <!-- <span class="active" v-show="item.IsDefault"></span> -->
                <span style="display:none">{{item.UserID}}</span>
              </div>
            </li>
            <li v-show="addtocad" v-if="filterAddress.length !== 3" class="Add_toCad">
              <a href="javascript:;" @click="Addbankcard">
                <img src="./images/add.png"/>
                {{this.lang['add bank card'].replace('{CurrencyName}', CurrencyName || '')}}
              </a>
            </li>
          </ul>
        </div>
        <div class="more"><a v-if="list.length > 3" href="javascript:;"  @click="loadMore">{{indexMore}}</a></div>

        <!-- 添加银行卡 -->
        <SwModal :isShow.sync="isShowAddCard" :isCloseOnClickBg="true" modalClass="userModal" :isShowBg="true" :isShowCloseBtn="true" :okText="lang['add']" :ok="submitAddCard">
          <div class="bankcard_add">
            <ul>
              <h2>{{this.lang['add bank card'].replace('{CurrencyName}', CurrencyName || '')}}</h2>
              <li>
                <p>
                  <span v-show="CurrencyName === 'USD' || CurrencyName === 'CNY' || CurrencyName === 'HKD'">{{lang['name of account holder']}}</span>
                  <span v-show="CurrencyName === 'VND'">{{lang['account holder']}}</span>
                </p>
                <input :placeholder="lang['please name of account holder']" maxlength="50" type="text" v-model='inputs.sname'>
              </li>

              <li v-show="CurrencyName === 'VND'">
                <p>
                  <span>{{lang['account']}}</span>
                </p>
                <input :placeholder="lang['please bank account']" v-model='inputs.yhzh' maxlength="54" onkeyup="value = value.replace(/[^\d]/g,'').replace(/\s/g,'').replace(/(\d{4})(?=\d)/g, '$1  ')" type="text">
              </li>

              <li v-show="CurrencyName === 'VND'">
                <p>
                  <span>{{lang['bank city']}}</span>
                </p>
                <input :placeholder="lang['Enter the city']" maxlength="50" type="text" v-model='inputs.yhzhs'>
              </li>

              <li v-show="CurrencyName === 'VND'">
                <p>

                  <span>{{lang['bank name']}}</span>
                </p>
                <input :placeholder="lang['Enter the bank name']" maxlength="50" type="text" v-model='inputs.yhmc'>
              </li>

              <li v-show="CurrencyName === 'VND'">
                <p>
                  <span>{{lang['branch']}}</span>
                </p>
                <input :placeholder="lang['Enter sub-branch']" maxlength="50" type="text" v-model='inputs.yhdz'>
              </li>

              <li v-show="CurrencyName === 'VND'">
                <p>
                  <span>PIN</span>
                </p>
                <input type="password" class="paddingL10" name="" :placeholder="lang['pleaseEnterAFundPassword']" v-model="assetPassword" maxlength="20" minlength="8">
              </li>

              <li v-show="CurrencyName === 'CNY'">
                <p>
                  <!-- <span>{{lang['bank name']}}</span> -->
                  <span>{{lang['bank names']}}</span>
                </p>
                <input :placeholder="lang['please bank names']" maxlength="50" type="text" v-model='inputs.yhmc'>
              </li>

              <li v-show="CurrencyName === 'USD' || CurrencyName === 'CNY' || CurrencyName === 'HKD'">
                <p>
                  <span>{{lang['bank account']}}</span>
                </p>
                <input :placeholder="lang['please bank account']" v-model='inputs.yhzh' maxlength="54" onkeyup="value = value.replace(/[^\d]/g,'').replace(/\s/g,'').replace(/(\d{4})(?=\d)/g, '$1  ')" type="text">
              </li>

              <li v-show="CurrencyName === 'CNY'">
                <p>
                  <span>PIN</span>
                </p>
                <input type="password" class="paddingL10" name="" :placeholder="lang['pleaseEnterAFundPassword']" v-model="assetPassword" maxlength="20" minlength="8">
              </li>

              <li v-show="CurrencyName === 'USD' || CurrencyName === 'HKD'">
                <p>
                  <span>{{lang['bank name']}}</span>
                </p>
                <input :placeholder="lang['please bank name']" maxlength="50" type="text" v-model='inputs.yhmc'>
              </li>

              <li v-show="CurrencyName === 'USD' || CurrencyName === 'HKD'">
                <p>
                  <span>{{lang['bank Address']}}</span>
                </p>
                <input :placeholder="lang['please bank Address']" maxlength="50" type="text" v-model='inputs.yhdz'>
              </li>

              <li v-show="CurrencyName === 'USD' || CurrencyName === 'HKD'">
                <p>
                  <span>SWIFT CODE</span>
                </p>
                <input :placeholder="lang['please swift code']" type="text" maxlength="20" v-model='inputs.swlftcode'>
              </li>

              <li v-show="CurrencyName === 'USD' || CurrencyName === 'HKD'">
                <p>
                  <span>PIN</span>
                </p>
                <input type="password" class="paddingL10" name="" :placeholder="lang['pleaseEnterAFundPassword']" v-model="assetPassword" maxlength="20" minlength="8">
              </li>
            </ul>
          </div>
        </SwModal>

        <div class="amount">

          <!-- USD提款说明 HKD提款说明-->
          <div class="bankcard_tishi" v-show="CurrencyName === 'USD' || CurrencyName === 'HKD'">
            <h3>{{lang['pay attention to']}}</h3>
            <p>1. {{lang['bank account name']}}</p>
            <p>2. {{lang['minimum amount of extraction'].replace('{money}', (TxInstructions.MinWithdraw || 0) + ' ' + CurrencyName || [])}}</p>
            <!--汇率FeeType 1固定，2比例-->
            <p>
              3. {{lang['extraction handling fee']
                  .replace('{charge}', TxInstructions.FeeType === 1 ? (TxInstructions.FeeRate || 0) : ((TxInstructions.FeeRate || 0) * 100 + '% '))
                  .replace('{minimum}', (TxInstructions.MinFee || 0) + ' ' + CurrencyName || [])}}
            </p>

            <p>4. {{lang['application for success']}}</p>
            <p>5. {{lang['daily total withdrawal'].replace('{upperlimit}', ' ' + (TxInstructions.OutMaxAmountOnDay || 0) + ' ' + CurrencyName || [])}}</p>
            <p>6. {{lang['Our platform']}}</p>
          </div>

          <div class="bankcard_tishi" v-show="CurrencyName === 'VND' || CurrencyName === 'CNY'">
            <h3>{{lang['pay attention to']}}</h3>
            <p>{{lang['IDCM does not provide'].replace('{currenc}', CurrencyName || [])}}</p>
          </div>

          <div class="Extract_amount" v-show="CurrencyName === 'USD'">
            <div class="ketiyue">
              {{lang['allowable balance']}}：{{totalNum(AvailableOutAmount, 2)}} {{CurrencyName}}
            </div>
            <div>
              <span>{{lang['withdrawal amount']}}</span>
              <input type="text" :placeholder="lang['please enter the amount']" v-model="amount"  ref="amount" id="amount">
              <p class="tishi" v-show="show">{{lang['overlimit withdrawal limit']}}</p>
            </div>
            <div>
              <!-- 用于占位, 使按钮和文本框位置保持一致-->
              <span style="visibility: hidden">{{lang['withdrawal amount']}}</span>
              <!-- 点击提取 -->
              <button  class="AddCadbtn" type="button" @click="withdraw">{{lang['draw']}}</button>
            </div>
          </div>
          
          <div class="Extract_amount" v-show="CurrencyName === 'HKD'">
            <div class="ketiyue">
              {{lang['allowable balance']}}：{{totalNum(AvailableOutAmountHKD, 2)}} {{CurrencyName}}
            </div>
            <div>
              <span>{{lang['withdrawal amount']}}</span>
              <input type="text" :placeholder="lang['please enter the amount']" v-model="amount"  ref="amount">
              <p class="tishi" v-show="show">{{lang['overlimit withdrawal limit']}}</p>
            </div>
            <div>
              <!-- 用于占位, 使按钮和文本框位置保持一致-->
              <span style="visibility: hidden">{{lang['withdrawal amount']}}</span>
              <!-- 点击提取 -->
              <button class="AddCadbtn" type="button" @click="withdraw">{{lang['draw']}}</button>
            </div>
          </div>
        </div>

        <!-- 提现弹窗 -->
        <SwModal :isShow.sync="isShowWithdraw" modalClass="getcash" :isCloseOnClickBg="true" :isShowBg="true" :isShowCloseBtn="true" :okText="lang['determineBth']" :noText="lang['cancelBth']" :ok="submitWithdraw">
          <div class="withdraw_pop-111">
            <ul>
              <p class="title">{{lang['withdraw deposit']}}</p>
              <li>
                <label>
                  <span>{{lang['withdrawal amount']}}:</span>
                </label>
                <p>{{amount | currency('', '','')}} {{CurrencyName}}</p>
              </li>
              <li>
                <label>
                  <span>{{lang['name of account holder']}}:</span>
                </label>
                <p>{{currentCard.CardUserName}}</p>
              </li>
              <li>
                <label>
                  <span>{{lang['due bank']}}:</span>
                </label>
                <p>{{currentCard.BankName}}</p>
              </li>
              <li>
                <label>
                  <span>{{lang['shroff account number']}}:</span>
                </label>
                <p>{{currentCard.CardNumber}}</p>
              </li>
              <li>
                <div class="text">{{lang['pleaseEnterAFundPassword']}}:</div>
                <div>
                  <input type="password" :placeholder="lang['pleaseEnterAFundPassword']" v-model="assetPassword" maxlength="20" minlength="8"></div>
              </li>
              <li v-show="isShowGoogleVerify">
                <div class="text">{{lang['loginCodeGoogle']}}:</div>
                <div>
                  <input type="password" :placeholder="lang['pleaseEnterAFundPassword']" v-model="googleCode" maxlength="20" minlength="8"></div>
              </li>
            </ul>
          </div>
        </SwModal>
        <!-- 提现弹窗 -->

        <!-- 提币成功 -->
        <SwModal :isShow.sync="showModal" modalClass="userModal smallModal" :isCloseOnClickBg="true" :isShowBg="true" :ok="closeWithdrawSuccessful" :onClosed="withdrawSuccessful" :okText="lang['iGotIt']" :title="lang['pay attention to']">
          <div class="successfulOperation">
            <p style="width:345px; margin:30px auto">
            {{tishiyu}}
          </p>
          </div>
        </SwModal>
        <!-- lang['application for success'] -->
        <!-- 提成成功 -->
        <!-- 弹窗插件 -->
        <!-- <span @click="showTip">show_tip</span>
        <span @click="showConfirm">show_confirm</span> -->
        <!-- 弹窗插件 --> </div>
    </div>

    <!--资产总览-->
    <PageFooter2 :lang="lang" :langKey="langKey"></PageFooter2>
  </div>
</template>
<script>
import commonMixins from '@/mixins/common.js'
import SwModal from '@/components/SwModal'
import ModalApi from '@/components/SwModal/api.js'
import CheckCurrencyOnInput from '@/utils/CheckCurrencyOnInput.js'
import Utils from '@/utils/Utils.js'
import commonFilter from '@/filters/common.js'
import Decimal from '@/libs/decimal.min.js'
import pageLeftMenu from './components/pageLeftMenu.vue'

export default {
  mixins: [commonMixins],
  data () {
    return {
      CurrencyCode: 'USD',          // 法币CODE 默认为USD
      defaultAssetsID: '',          // 默认获取USD的AssID,
      TxInstructions: {},           // 提现说明相关数据
      currentIndexs: '',
      limitNum: 3,
      adfasdf: false,
      showModal: false,
      isShowWithdraw: false,
      isShowAddCard: false,
      isShowAssetPassword: false,
      list: [],
      show: false,
      phone: '',
      zijinmima: false,
      addtocad: false,
      inputs: {
        sname: '',
        yhmc: '',
        yhzh: '',
        yhdz: '',
        yhzhs: '',
        swlftcode: ''
      },
      safePwd: '',
      assetPassword: '',
      Announcement: true,
      amount: '',
      AvailableOutAmount: '',
      quanbutixian: '',
      chikaren: '',
      yinghang: '',
      zhanghao: '',
      yinghangID: '',
      currentCard: {},
      tishiyu: '',
      isShowGoogleVerify: false,
      withdrawConfig: null,
      USDAssetId: '',
      googleCode: '',
      indexMore: '',
      deleteShow: '',
      isMore: true,
      CurrencyList: [],
      CurrencyID: '',
      CurrencyName: 'USD',
      addbacktitle: '',
      AvailableOutAmountHKD: ''
    }
  },
  components: {
    SwModal,
    pageLeftMenu
  },
  watch: {
    langKey () {
      if (this.isMore) {
        this.indexMore = this.lang['indexMore']
      } else {
        this.indexMore = this.lang['packup']
      }
    },
    list () {
      // 若最终列表里没有默认选中的，强制默认选中一张，无论多张或者一张，若无默认选中，都默认选中第一张
      if (this.list.length) {
        let isExistDefault = false
        this.list.forEach((item) => {
          item.IsDefault && (isExistDefault = true)
        })
        if (!isExistDefault) {
          this.currentIndex(this.list[0], 0)
        }
      }
    }
  },
  methods: {
    /**
     * KYC规则获取
     * type  [Number] (1: C2C挂单买入; 2: 币币交易; 3: 提现; 4: 提币; 5: C2C挂单卖出; 6: C2C 买入; 7: C2C卖出)
     */ 
    getKYC (type) {
      this.$http.get('Setting/GetKYCRule', {
        kYCConstraint: type,
      }, {
        isQueryString: true
      })
      .then((res) => {
        if (res) {
          // console.log('IsEnaled:', res.Data.IsEnaled)
          return res.Data.IsEnaled
        }
      })
    },
    totalNum (val, pre) {
      return commonFilter.fillDecimal(commonFilter.currency(new Decimal(val || 0).toFixed(10), 'USD', '', pre), pre)
    },
    // showDeleteIOCN
    liEnter (e) {
      this.deleteShow = e
    },
    liEnterHide (e) {
      this.deleteShow = false
    },
    // 点击国旗切换货币类型
    cKcurrency (item) {
      this.currentIndexs = '' // 每次切换都要清空，不然下一类银行卡会选择上次银行卡类的默认选中
      this.CurrencyID = item.ID  // 资产ID   --- assetsID
      this.CurrencyHover = item.Code
      this.CurrencyName = item.Code
      this.CurrencyCode = item.Code
      this.jiazaiyinghangka(item.ID)
      // 提现说明:注意目前除了USD和HKD之外禁止调用此函数
      if (item.Code === 'USD' || item.Code === 'HKD') {
        this.getTxInstructions(item.ID)
      }
    },
    deleteBanCard (itemID) {
      let confirm = ModalApi.confirm({
        isShowCloseBtn: true,
        isCloseOnClickBg: true,
        modalClass: 'userModal smallModal',
        title: 'prompt message',
        content: 'Confirm Bank Account removal',
        okText: 'delete',
        noText: '',
        isShowBg: true,
        ok: () => {
          this.$host1.post('BankUser/DisableBankCard', {
            id: itemID
          }, {
            modalOptions: {
              modalClass: 'userModal'
            }
          })
          .then((res) => {
            confirm.close()
            this.currentIndexs = ''
            this.jiazaiyinghangka(this.CurrencyID)
          })
        },
        no: () => {
          confirm.close()
        }
      })
    },
    withdrawalAll () {
      this.amount = commonFilter.fillDecimal(this.AvailableOutAmount, 2)
    },
    quanbutixiansa () {
      this.quanbutixian = this.AvailableOutAmount
    },
    currentIndex (item = {}, index) {
      this.chikaren = item.CardUserName
      this.yinghang = item.BankName
      this.zhanghao = item.CardNumber
      this.yinghangID = item.ID
      this.adfasdf = true
      this.$http.post('BankUser/SetDefault', {
        id: item.ID
      }, {
        modalOptions: {
          modalClass: 'userModal'
        }
      })
      .then((res) => {
        if (res.isOk) {
          this.currentIndexs = index
        }
      })
    },
    onClosed () {
      this.isShowAddCard = false
      this.showModal = false
      this.isShowAssetPassword = false
      setTimeout(() => {
        this.$router.push({path: '/safety?isShowForgerPin=true'})
      }, 300)
    },
    loadMore () {
      if (this.limitNum === 3) {
        this.indexMore = this.lang['packup']
        this.limitNum = this.list.length
        this.isMore = false
      } else {
        this.indexMore = this.lang['indexMore']
        this.limitNum = 3
        this.isMore = true
      }
    },
    Addbankcard () {
      this.inputs.sname = ''
      this.inputs.yhmc = ''
      this.inputs.yhzh = ''
      this.inputs.yhdz = ''
      this.inputs.yhzhs = ''
      this.inputs.swlftcode = ''
      this.assetPassword = ''
      this.isShowAddCard = !this.isShowAddCard
      this.inputs.sname = this.mixUserInfo.realName
    },
    cancelAddCard () {
      this.isShowAddCard = false
      this.inputs.sname = ''
      this.inputs.yhmc = ''
      this.inputs.yhzh = ''
      this.inputs.yhdz = ''
      this.inputs.yhzhs = ''
      this.inputs.swlftcode = ''
      this.assetPassword = ''
    },
    submitAddCard () {
      let tip = ''
      // 越后的提示放越前
      if (!this.assetPassword) {
        tip = this.lang['pleaseEnterAFundPassword']
      }
      if (!this.inputs.yhzh) {
        tip = this.lang['please bank account']
      }
      if (!this.inputs.yhmc) {
        tip = this.lang['please bank name']
      }
      if (!this.inputs.sname) {
        tip = this.lang['name of account holder']
      }

      if (tip) {
        ModalApi.message(tip, null, null, 'userModal')
        return
      }

      this.inputs.yhzh.replace(/\s+/g, '')
      this.$http.post('BankUser/AddCard', {
        CurrencyID: this.CurrencyID,
        BankName: this.inputs.yhmc,
        CardNumber: this.inputs.yhzh.replace(/[^0-9a-zA-Z_]/g, ''),
        CardUserName: this.inputs.sname,
        Branch: this.inputs.yhdz,
        SWIFTCode: this.inputs.swlftcode,
        IsDefault: true,
        TransactionPassword: this.assetPassword,
        ClientType: 0
      }, {
        // mock: 'GetBankList'
        modalOptions: {
          modalClass: 'userModal'
        }
      })
      .then((res) => {
        if (res.StatusCode === '200') {
          this.isShowAddCard = false
          this.isShowAssetPassword = false
          this.showModal = true
          this.tishiyu = this.lang['add success']
          this.jiazaiyinghangka(this.CurrencyID)
        }
      })
    },
    // 提现相关信息 --作废
    getWithdrawConfig () {
      let promise = Utils.makePromise()
      if (!this.withdrawConfig) {
        this.$http.post('Setting/GetWithdrawConfig', {
          assetsID: this.USDAssetId
        }, {
          modalOptions: {
            modalClass: 'userModal'
          }
        }).then((res) => {
          this.withdrawConfig = res.Data
          promise.resolveHandle()
        })
      } else {
        promise.resolveHandle()
      }
      return promise
    },
    // 点击提取
    withdraw () { // 先认证、后验证
      if (!this.amount) {
        ModalApi.message(this.lang['please enter the amount'], null, null, 'userModal')
        return
      }
      // let isKYC = this.getKYC(3)
      this.getWithdrawConfig()
      .then(() => {
        let minWithdraw = this.TxInstructions.MinWithdraw
        // 最小提现判断
        if (this.amount < minWithdraw) {
          ModalApi.message(this.lang['51022'].replace('{amount}', minWithdraw).replace('{nation}', ' ' + this.CurrencyName), null, null, 'userModal')
          return
        }
        // 0：未认证，1:未通过,3：已提交认证资料，2：认证通过
        this.$http.post('Security/GetCustomer')
        .then((res) => {
          // if (res.VerifyResult === 0 || res.VerifyResult === 1) {
          //   let tip = res.VerifyResult === 0 ? this.lang['verificationBasic_unrecognized'] : this.lang['certification not pass']
          //   let confirm = ModalApi.confirm({
          //     isCloseOnClickBg: true,
          //     isShowCloseBtn: true,
          //     modalClass: 'userModal',
          //     title: 'point out',
          //     content: tip,
          //     okText: 'to authenticate',
          //     noText: '',
          //     isShowBg: true,
          //     ok: () => {
          //       confirm.close()
          //       this.$nextTick(() => {
          //         this.$router.push({path: '/safety?isToggleCaidVerified=true'})
          //       })
          //     }
          //   })
          // }

          // if (res.VerifyResult === 3) {
          //   ModalApi.message(this.lang['Authentication information audit patiently'], null, null, 'userModal')
          // }

          // if (res.VerifyResult === 2) {
            this.assetPassword = ''
            if (!this.list || !this.list.length) {
              ModalApi.message(this.lang['please add Bank Account'], null, null, 'userModal')
              return
            }

            this.currentCard = this.list[this.currentIndexs]
            let amounts = 0 // USD提现余额 || this.AvailableOutAmountHKD HKD提现余额
            if (this.CurrencyName === 'USD') {
              amounts = this.AvailableOutAmount
            } else if (this.CurrencyName === 'HKD') {
              amounts = this.AvailableOutAmountHKD
            }

            if (this.amount > amounts) {
              ModalApi.message(this.lang['amount cash can not exceed available balance'], null, null, 'userModal')
              return
            }

            this.$http.post('Security/GetSecurityStrategy', {}, {
              modalOptions: {
                modalClass: 'userModal'
              }
            })
            .then((res) => {
              /*
              if (res.CashOutVerifyType === 300) { // 需要输入资金密码
                this.isShowAssetPassword = true
              }
              */
              if (res.CashOutVerifyType === 301) { // 需要资金密码+google验证
                this.isShowGoogleVerify = true
              }

              this.isShowWithdraw = true
              this.$refs.getUnReadNotInfo.$emit('getUnReadNotInfo') // 调用财务记录最新显示
            })
          // }
        })
      })
    },
    submitWithdraw () {
      if (!this.assetPassword) { // 资金密码为空
        ModalApi.message(this.lang['pleaseEnterAFundPassword'], null, null, 'userModal')
        return
      }

      if (this.isShowGoogleVerify && !this.googleCode) { // 谷歌验证码为空
        ModalApi.message(this.lang['43009'], null, null, 'userModal')
        return
      }

      this.isShowAddCard = false
      this.$http.post('CustomerAssets/CustomerWithdraw', {
        ApplyAmount: this.amount,
        BankCardID: this.currentCard.ID,
        TradePassword: this.assetPassword,
        GoogleCode: this.googleCode,
        CurrencyCode: this.CurrencyName         // 法币CODE传币的名字
      }, {
        // mock: 'GetBankList'
        modalOptions: {
          modalClass: 'userModal'
        }
      })
      .then((res) => {
        if (res.StatusCode === '200') {
          this.tishiyu = this.lang['application for success']
          this.isShowWithdraw = false
          this.showModal = true
          this.amount = ''
          this.$refs.getUnReadNotInfo.$emit('getUnReadNotInfo') // 调用财务记录最新显示
        }
      })
    },
    cancelWithdraw () {
      this.assetPassword = ''
      this.isShowWithdraw = false
      this.googleCode = ''
      this.isShowGoogleVerify = false
    },
    showTip () {
      ModalApi.message(this.lang['please add Bank Account'], null, null, 'userModal')
    },
    // 获取用户银行卡
    jiazaiyinghangka (ID) {
      this.$http.post('BankUser/GetBankCardList', {
        CurrencyID: ID
      }, {
        modalOptions: {
          modalClass: 'userModal'
        }
      })
      .then((res) => {
        this.list = res.Data || []
        this.addtocad = true
        this.list.forEach((v, i) => {
          if (v.IsDefault === true) {
            this.currentIndexs = i
          }
        })
      })
    },
    closeWithdrawSuccessful () {
      this.showModal = false
    },
    withdrawSuccessful () {
      if (this.lang['add success'] !== this.tishiyu) {
        this.$router.push({path: '/assets'})
      }
    },
    // 获取用户个人信息
    GetAccountInfo () {
      this.$http.post('CustomerAssets/GetCurrencyAssetsList', {
      }, {
        modalOptions: {
          modalClass: 'userModal'
        }
      })
      .then((res) => {
        this.AvailableOutAmount = res.Data.Assets[0].AvailableAmount
        this.AvailableOutAmountHKD = res.Data.Assets[1].AvailableAmount
      })
    },
    // 获取货币类型
    GetCurrencyList () {
      this.$http.post('Bank/GetCurrencyList', {
      }, {
        modalOptions: {
          modalClass: 'userModal'
        }
      })
      .then((res) => {
        let tmp = res.Data || []
        for (let i = 0; i < tmp.length; i++) {
          if (tmp[i].Code === this.CurrencyName) {
            // 窗体加载的时候需要这个ID
            this.defaultAssetsID = tmp[i].ID
            break
          }
        }
        // 筛选出IsApplyC2C的
        tmp = tmp.filter((item) => item.IsApplyC2C)
        // 从小到大排序
        this.CurrencyList = tmp.sort((a, b) => {
          return a.Sort - b.Sort
        })
        this.CurrencyList.forEach((item) => {
          if (item.Code === this.CurrencyName) {
            this.CurrencyID = item.ID
            this.jiazaiyinghangka(item.ID)
          }
        })
      })
    },
    // 获取提现说明
    getTxInstructions (ID) {
      this.$http.post('Setting/GetWithdrawConfig', {
        assetsID: ID
      }).then((s) => {
        this.TxInstructions = s.Data || [] // 容错处理 陈新军
      })
    }
  },
  mounted () {
    this.indexMore = this.lang['indexMore']
    // 提现跳转过来的传参
    if (this.$route.query.AssetsType) {
      this.CurrencyName = this.$route.query.AssetsType
    } else {
      this.CurrencyName = 'USD'
    }
    // 个人信息--要调用新接口
    // this.GetAccountInfo()
    this.GetCurrencyList()
    // 取美元ID
    this.$http.post('CustomerAssets/GetAssets', {}, {
      modalOptions: {
        modalClass: 'userModal'
      }
    })
    .then((res) => {
      for (let i = 0; i < res.Data.Assets.length; i++) {
        if (res.Data.Assets[i].AssetsCode === 'USD') {
          this.AvailableOutAmount = res.Data.Assets[i].AvailableAmount
        }

        if (res.Data.Assets[i].AssetsCode === 'HKD') {
          this.AvailableOutAmountHKD = res.Data.Assets[i].AvailableAmount
        }
      }
      let assets = (!res.Data || !res.Data.Assets) ? [] : res.Data.Assets
      assets.forEach((v) => {
        v.AssetsCode === 'USD' && (this.USDAssetId = v.ID)
      })
    })

    // 只能输入数字
    this.$nextTick(() => {
      CheckCurrencyOnInput(this, $('#amount')[0], 'amount', 2)
    })

    // 提现说明默认为USD的说明----有异步的BUG暂时先用setTimeout
    setTimeout(() => {
      this.getTxInstructions(this.defaultAssetsID)
    }, 500)
  },
  computed: {
    filterAddress: function () {
      return this.list.slice(0, this.limitNum)
    }
  }
}
</script>

<style lang="less">
.userModal{
  .head{
    text-align: center;
  }
  .sw-confirm{
    text-align: center;
  }
}
.getcash {    
  width: 565px !important;
}
.pageBankCard{
  font-weight: 100;
  color: white;
  .mainHead{
    height: 47px;
    line-height: 47px;
    color: white;
    padding:0 20px;
    background: #202832;
    white-space: nowrap;

    h3 {
      float: left;
      display: inline-block;
      font-weight: 100;
    }
    span {
      margin:0;
      letter-spacing:1.5px;
    }
    ul {
      display: inline-block;
      margin-left: 50px;
      li {
        float: left;
        width: 118px;
        height: 45px;
        border: 1px solid #202832;
        // margin-top: 4px;
        line-height: 47px;
        font-size: 14px;
        text-align: center;
        img {
          position: relative;
          top: 3px;
        }
        a {
          color: #c4c9c7;
            font-weight: lighter;
        }
      }

      li.lihover {
        background: #14141C;
        width: 118px;
        height: 45px;
        border: 1px solid rgba(46,127,207,0.33);
        border-radius: 2px;
      }
    }
  } 
  
.ketiyue {
  top: 0;
  left: 0;
  font-size: 16px;
}

.paddingL10 {
  padding: 0 10px;
}

.more a {
  color: #c4c9c7;
}

.gg_background {
  background-color: rgba(0, 0, 0, .8);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 200;
}

.bankcard_card {
  position: relative;
  top: 20px;
  height: 200px;

  ul {
    display: flex;
    justify-content: space-between;
  }
}

.listContent {
  display: block;
  position: absolute;
  z-index: 1;
  width: 100%;
  padding-top: 15px;
  top: 0;
  left: 0;
  .text {
    position: relative;
    line-height: 25px;
    text-align: center;
    top: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  p:nth-of-type(1n) {
    padding: 0 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}


.bankcard_card li:nth-of-type(3n) {
    margin: 0;
  }

  .bankcard_card .bank-list {
    background: #202832 url(./images/bankcard_background.png) no-repeat center 20px;
    width: 35%;
    height: 175px;
    margin: 0 40px 10px 0;
    float: left;
    padding: 10px;
    position: relative;
    cursor: pointer;
  }

  .bankcard_card .bank-list .delete {
    background: url(./images/delete.png) no-repeat center center;
    width: 15px;
    height: 16px;
    position: absolute;
    right: 15px;
    top: 12.5px;
  }

  .bankcard_card .bank-list.active:after {
    content: "";
    background: #3782FF url(./images/bankcard_background.png) no-repeat center 20px;
    width: 100%;
    height: 100%;
    margin: 0 10px 10px 0;
    padding: 10px;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
  }

  .Add_toCad {
    width: 35%;
    clear: both;
    position: relative;
    margin-bottom: 10px;
    display: inline-block;
    a {
      display: block;
      overflow: hidden;
      height: 193px;
      border: dashed 1px #999;
      text-align: center;
      margin: 0 auto;
      color: #c4c9c7;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      img {
        width: 60px;
        height: 60px;
        margin-bottom: 20px;
      }
    }
  }

  .amount {
    clear: both;
    display: flex;
    margin: 50px 0;
    flex-direction: row;
    justify-content: space-between;

    .Extract_amount {
      display: inline-block;
      div {
        margin-top: 35px;
        clear: both;
      }
      span {
        display: inline-block;
        color: #c4c9c7;
        font-size: 16px;
        padding-right: 10px;
      }
      input {
        width: 250px;
        padding: 0 10px;
        height: 36px;
        color: #c4c9c7;
        line-height: 36px;
        background: #28282e;
        border-radius: 2px;
      }
      input::-webkit-input-placeholder {
        color: #737980;
      }
      button {
        width: 270px;
        height: 36px;
        line-height: 36px;
        background: #3782FF;
        font-size: 14px;
        border-radius: 2px;
        text-align: center;
        color: white;
        font-weight: 100;
      }
    }
  }

  .bankcard_tishi {
    padding-bottom: 30px;
    color: #c4c9c7;
    font-size: 14px;
    h3 {
      font-weight: 600;
      padding-bottom: 15px;
    }
    p {
      font-weight: lighter;
      line-height: 30px;
      color: #c4c9c7;
      width: 460px;
    }
  }
}
/*// 提现弹框*/
.withdraw_pop-111 {
  color: #c4c9c7;
  font-weight: lighter;
  background: #1A1F2B;
  border-radius: 2px;
  p.title{
    margin: 20px 0;
    display: block;
    text-align: center;
  }
  ul {
    padding: 0 50px 50px;
  }

  li {
    line-height: 40px;
    label {
      width: 220px;
      display: inline-block;
      span {
        display: inline-block;
        margin-right: 30px;
        line-height: 20px;
      }
    }
  }

  p {
    display: inline-block;
  }

  input {
    color: #c4c9c7;
    width: 95%;
    padding: 0 10px;
    height: 40px;
    line-height: 40px;
    background: #2A3440;
    border-radius: 2px;
    border: none;
  }
}
/*// 添加银行卡弹框*/
.bankcard_add {
  overflow: hidden;
  width: 602px;
  margin: 0 auto;
  margin-top: 40px;
  p span {
    display: inline-block;
    line-height: 25px;
    font-size: 15px;
    color: #c4c9c7;
  }

  input::-webkit-input-placeholder {
    color: #dedede
  }

  h2 {
    text-align: center;
    font-size: 16px;
    margin-bottom: 30px;
    color: #c4c9c7;
  }

  li {
    width: 400px;
    margin: 0 auto;
    height: 90px;
    p {
      padding-left: 10px;
      margin-bottom: 5px;
      span {
        color: #c3c3c4;
      }
    }
    input {
      width: 100%;
      font-size: 14px;
      color: #c4c9c7;
      font-weight: lighter;
      text-align: left;
      text-indent: 10px;
      background: #2A3440;
      height: 46px;
      line-height: 46px;
      border-radius: 2px;
    }
    input::-webkit-input-placeholder {
      color: #737980;
    }

    &:last-of-type {
      margin-bottom: 10px;
    }
  }

  .sumbitBox {
    width: 310px;
    height: 46px;
    line-height: 46px;
    background: #3559a0;
    font-size: 16px;
    border-radius: 5px;
    text-align: center;
    color: #c4c9c7;
    display: block;
    margin: 0 auto;
  }
}

@media screen and (max-width: 1100px){
  .pageBankCard  {

    .Add_toCad  a {
      width: 175px;
      height: 120px;

      img {
        width: 36px;
        height: 37px;
        margin-bottom: 10px;
      }
    }

    .mainHead  ul #HKD{
      display: none;
    }

    .listContent {
      font-size: 12px;

      .text {
        top: 30px;
        line-height: 20px;

        p {
          width: auto;
        }
      }
    }

    .bankcard_card  {
      height: 0;

      ul {
        justify-content: flex-start;
      }
      .bank-list {
        width: 175px;
        height: 120px;
        padding: 0;
        background: #202835 url('./images/bankcard_small.png') no-repeat center 12px;
        margin-right: 10px;

        &.active:after {
          width: 175px;
          height: 120px;
          padding: 0;
          background: #3782FF url('./images/bankcard_small.png') no-repeat center 12px;
        }
      }
    }
    

    .bankcard_tishi {
      padding-bottom: 0;
    }

    .amount {
      margin-top: 0;
      flex-direction: column;
    }
  }
}

</style>
